<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选项卡应用--点一下走一下+自动切换播放</title>
    <style>
        .box div{
            display: none;
            border:1px solid #000;
            width: 200px;
            height: 200px
            }
        .on{color: #fff;background: tomato}
    </style>
</head>
<body>
    <script>
        //// 定时播放
        // constructor(id){
        //     super(id)
        //     setInterval(this.next.bind(this),1000)
        // }

        //不加定时器的话，每点击屏幕一下，动一下
        // var at = new AutoTab('box2')
        // document.onclick =function(){ 
        //     at.next();
        // }

        // 选项卡
        class Tab{   //步骤2
            constructor(id){
                this.oBox = document.getElementById(id);
                this.aBtn = this.oBox.getElementsByTagName('input')
                this.aDiv = this.oBox.getElementsByTagName('div')
                this.iNow = 0 //加入
                this.init()
            }
            init(){  //步骤3
                for (let i = 0; i < this.aBtn.length; i++) {
                    this.aBtn[i].onclick=function(){
                        // alert(this);
                        this.iNow = i;  //加入
                        this.hide();
                        this.show(i);
                        document.title=this.iNow
                    }.bind(this)  //矫正this指向
                }
            }
            hide(){
                for (let i = 0; i < this.aBtn.length; i++) {
                    this.aBtn[i].className=''
                    this.aDiv[i].style.display='none'
                }
            }
            show(dd){
                this.aBtn[dd].className='on';
                this.aDiv[dd].style.display='block'
            }
        }
        
        // 继承
        class AutoTab extends Tab{
            // 定时播放
            constructor(id){
                super(id)
                setInterval(this.next.bind(this),1000)
            }
            // 自动播放添加
            next(){
                this.iNow++;
                if(this.iNow == this.aBtn.length){ //不能一直加
                    this.iNow = 0
                }
                this.hide();
                this.show(this.iNow)
            }
        }

        window.onload = function(){
            new Tab('box')    // 步骤1
            var at = new AutoTab('box2')

            //不加定时器的话，每点击屏幕一下，动一下
            document.onclick =function(){ 
                at.next();
            }
        }   
    </script>
    <div id="box" class="box">
        <input type="button" value="aaa" class="on">
        <input type="button" value="bbb">
        <input type="button" value="ccc">
        <div style="display:block">111</div>
        <div>222</div>
        <div>333</div>
    </div>
    <div id="box2" class="box">
            <input type="button" value="aaa" class="on">
            <input type="button" value="bbb">
            <input type="button" value="ccc">
            <div style="display:block">111</div>
            <div>222</div>
            <div>333</div>
        </div>
</body>
</html>